<template>
  <div class="pages">

    <div class="pages_itmes">
      <div class="cardBlock">
        <div class="cardBlock_title">自动解除签约限制</div>
        <div class="cardBlock_fors">
          <div class="cardBlock_items">
            <div class="cardBlock_items_titles">七月限制开关</div>
            <a-switch  v-model="cardxtjqszFroms.auto_allow.enable" />
          </div>
          <div class="cardBlock_items">
            <div class="cardBlock_items_titles">解除限制时间</div>
            <div>
              <a-input-number  v-model="cardxtjqszFroms.auto_allow.valid_days"/>
              <span>天</span>
            </div>
          </div>
        </div>
      </div>

      <div class="cardBlock">
        <div class="cardBlock_title">默认配置</div>
        <div class="cardBlock_fors" v-for="(items,index) in cardxtjqszFroms.default" :key="index">
          <div class="cardBlock_items">
            <!-- <div class="cardBlock_items_lable">支持数量</div> -->
            <a-input disabled :value="Number(index)+1"  addon-before="支持数量" />
          </div>
          <div class="cardBlock_items">
            <!-- <div class="cardBlock_items_lable">鉴权数量</div> -->
            <a-input v-model="cardxtjqszFroms.default[index]" addon-before="鉴权数量" />
          </div>
        </div>
        <div>
          <a-button @click="addLine('default','add')">新增一行</a-button>
          <a-button :disabled="cardxtjqszFroms.default.length<=1" @click="addLine('default','del')">删除一行</a-button>
        </div>
      </div>

      <div class="cardBlock">
        <div class="cardBlock_title">区域银行</div>
        <div class="cardBlock_fors" v-for="(items,index) in cardxtjqszFroms.region_bank" :key="index">
          <div class="cardBlock_items">
            <!-- <div class="cardBlock_items_lable">支持数量</div> -->
            <a-input disabled :value="Number(index)+1" addon-before="支持数量" />
          </div>
          <div class="cardBlock_items">
            <!-- <div class="cardBlock_items_lable">鉴权数量</div> -->
            <a-input v-model="cardxtjqszFroms.region_bank[index]"  addon-before="鉴权数量" />
          </div>
        </div>
        <div>
          <a-button @click="addLine('region_bank','add')">新增一行</a-button>
          <a-button :disabled="cardxtjqszFroms.region_bank.length<=1" @click="addLine('region_bank','del')">删除一行</a-button>
        </div>
      </div>
      
      <div class="submits">
          <a-button type="primary" @click="writesConfigCommon">提交</a-button>
          <a-button type="primary" @click="addLine">同步品牌</a-button>
        </div>
    </div>

    <div class="pages_itmes">
      <a-table
        bordered
        :scroll="{  y: 600 }"
        :columns="columns"
        :data-source="tableData"
        :rowKey="(record, index) => index"
        :pagination="pagination"
        @change="pagination=$event,getTableList()"
      >
        <span slot="isSet" slot-scope="text">
           <a-tag v-if="text==0" color="red">未设置</a-tag>
           <a-tag v-else color="orange">已设置</a-tag>
        </span>
        <span slot="operate" slot-scope="text, record">
          <a-button type="link" @click="setInfor(record)">设置</a-button>
        </span>
      </a-table>
    </div>

    <editCardxtjqsz ref="editCardxtjqszs" @changes="getTableList"></editCardxtjqsz>
  </div>
</template>

<script>
import { getConfigCommon,writeConfigCommon, getBankAstrictListApi } from '@/api/system.js'
import editCardxtjqsz from "./diogla/editCardxtjqsz.vue"
export default {
  name: '',
  components:{
    editCardxtjqsz
  },
  data() {
      return {
        cardxtjqszFroms:{
          auto_allow:{
            enable:true,
            valid_days:0,
          },
          default:[],
          region_bank:[],
        },
        tableData: [],
        pagination:{
          total:0,
          current:1,
          pageSize:50,
        },
        columns:[
          {
            title: '#',
            dataIndex: 'bank_id',
            align: 'center'
          },
          {
            title: '银行名称',
            dataIndex: 'bank_name',
            align: 'center'
          },
          {
            title: '是否设置鉴权',
            dataIndex: 'is_set',
            align: 'center',
            scopedSlots: { customRender: 'isSet' }
          },
          {
            title: '操作',
            dataIndex: 'id',
            align: 'center',
            scopedSlots: { customRender: 'operate' }
          },
        ]
      }
  },
  created(){
    
    this.getDataInfor()
    this.getTableList()
  },
  methods:{
    addLine(key,type){
      if(type=='add'){
        this.cardxtjqszFroms[key].push(1)
      }
      if(type=='del'){
        if(this.cardxtjqszFroms[key].length<=1){
          return
        }
        this.cardxtjqszFroms[key].splice(this.cardxtjqszFroms[key].length-1,1)
      }
    },
    writesConfigCommon(){
      writeConfigCommon({
        scene:'sys_credit_card_astrict',
        brand_id: process.env.VUE_APP_BRAND_ID,
        ...this.cardxtjqszFroms
      }).then(res=>{
        this.$message.success("操作成功");
      })
    },


    setInfor(jsons){
      this.$refs.editCardxtjqszs.openCardxtjqszDiogla(jsons)
    },


    getDataInfor(){
      getConfigCommon({scene:'sys_credit_card_astrict',
        brand_id: process.env.VUE_APP_BRAND_ID,}).then(res=>{
        this.cardxtjqszFroms=res.data
      })
    },
    getTableList(){
        var json={
          page:  this.pagination.current,
          page_size:  this.pagination.pageSize,
          search:{
            brand_id:process.env.VUE_APP_BRAND_ID,
            bank_id:"",
            bank_name:""
          }
        }
      getBankAstrictListApi(json).then(res=>{
        this.tableData=res.data.list
        this.pagination.total=res.data.total
      })
    }
  }
}
</script>

<style lang="less" scoped>
.pages{
  display: flex;
  align-items: self-start;
  justify-content: space-between;
  .pages_itmes{
    width: 45%;
  }
}
.submits{
  padding: 15px 0 0;
}
.cardBlock{
  .cardBlock_title{
    padding: 10px 0;
    margin: 0 0 5px;
    color: rgba(0,0,0,.85);
  }
  .cardBlock_fors{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    .cardBlock_items{
      width: 45%;
      display: flex;
      align-items: center;
      .cardBlock_items_titles{
        color: rgba(0,0,0,.65);
      }
      .cardBlock_items_lable{
        border: 1px solid #d9d9d9;
        padding: 4px 0;
        border-radius: 2px;
        width: 220px;
        text-align: center;
      }
    }
  }
}
</style>
